<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        window.onload = function () {
            //获取body标签
            var body = document.getElementsByTagName("body")[0]
            // alert( body)

            /**
             *  body
             *  document中的body属性,保存的是body标签
             */
            var body1 = document.body;
            // alert( body1)

            /**
             * documentElement
             * 获取html标签
             */
            var html = document.documentElement;
            // alert( html)

            //代表页面中的所有元素，已经弃用
            var all = document.all

            //根据元素的class的属性值获取元素
            var elementsByClassName = document.getElementsByClassName("div1");
            // alert( elementsByClassName.length)


            //获取box1中的所有div标签
            var divs = document.getElementsByTagName("div");
            // alert( divs.length)


            /**
             *  document.querySelector()
             *   - 需要一个选择器的字符串作为参数，可以根据一个css选择器来获取元素
             *   - 如果有多个元素，则返回第一个元素
             */

            var div = document.querySelector(".box1 div")
            alert(div.innerHTML)


            /**
             * querySelectorAll()
             *  - 需要一个选择器的字符串作为参数，根据选择器获取所有元素
             *  - 返回一个元素集合
             */
            var divs = document.querySelectorAll(".box1 div");
            alert(divs.length)
            //即使只有一个元素，也会返回一个元素集合
            var divs1 = document.querySelectorAll("#div1");
            alert(divs1.length)
        }
    </script>
</head>
<body>
<div id="div1">我是div1</div>
<div class="box1">
    <div>我是box1的div1</div>
    <div>我是box1的div1</div>
    <div>我是box1的div1</div>

</div>

</body>
</html>
